<template>
  <div class="box">
    <!-- 头部导航 -->
    <div class="header">
      <van-nav-bar title="详情页" @click-left="$router.back()">
        <!-- 左箭头 -->
        <template #left>
          <van-icon name="arrow-left" size="18" color="black" />
        </template>

        <!-- 右图标 -->
        <template #right>
          <van-popover v-model="showPopover" theme="dark" trigger="click" :actions="actions" placement="bottom-end"
            @select="onselect">
            <template #reference>
              <van-icon name="ellipsis" size="18" color="black" />
            </template>
          </van-popover>
        </template>
      </van-nav-bar>
    </div>
    <!-- 主要内容 -->
    <div class="main">
      <!-- 左边分类列表 -->
      <div class="left">
        <van-sidebar v-model="activeKey" @change='onchange'>
          <van-sidebar-item :title="item" :key="index" v-for="(item, index) in categoryList" />
        </van-sidebar>
      </div>
      <!-- 右边的分类下品牌列表 -->
      <div class="doright">
        <h3>热门品牌</h3>
        <div class="right">
        <van-tag   size="large" v-for="(item,index) in brandList" :key="index" @click='jumpTo(categoryList[activeKey],item.brand)'>{{item.brand}} </van-tag>
      </div>
      </div>
    </div>
  </div>
</template>
  
<script>
import Vue from 'vue';
import { Popover, Sidebar, SidebarItem,Tag } from 'vant';

Vue.use(Popover);
Vue.use(Sidebar);
Vue.use(SidebarItem);
Vue.use(Tag  );
import { doCategoryList, doCategoryBrandList, } from '../api/kind'
export default {
  data() {
    return {
      // 头部导航
      showPopover: false,
      actions: [
        { text: '首页', icon: "wap-home-o" },
        { text: '购物车', icon: "cart-o" }],
      // 侧边导航分类
      categoryList: [],
      activeKey: 0,
      brandList:[]
    }
  },
  methods: {
    // 导航右图下拉选项
    onselect(action, index) {
      switch (index) {
        case 0:
          this.$router.push('/home')
          break;
        case 1:
          this.$router.push('/cart')
          break;
        default:
          break;
      }
    },
    onchange(index){
      this.activeKey=index
      this.doCategoryBrandList() 
    },
    doCategoryBrandList() {
      doCategoryBrandList({ category: this.categoryList[this.activeKey]}).then(res => {
        console.log(res.data.data)
        this.brandList=res.data.data
      })
    }
  },
  // 获取数据
  created() {
    // 侧边分类
    doCategoryList().then(res => {
      // console.log(res.data.data);
      this.categoryList = res.data.data
      this.doCategoryBrandList()    //刚进页面就渲染一次
    })
  },
}
</script>
<style scoped>
.main {
  display: flex;
}

.right {
  flex: 1;
  padding: .2rem;
}
::v-deep .van-tag {
  margin: 0.05rem;
  background: rgb(28, 82, 161);
  font-size: .12rem;
}
</style>
  